<template>
    <div class="common-layout">
        <el-container class="context-box">
            <el-header class="header">
                <div class="header_content">
                    <p>在线体检预约管理后台</p>
                    <div style="display: flex; justify-content: space-between;align-items: center;">
                        用户名：{{ userName }}
                        <el-icon size="25px" @click="exitFn">
                            <SwitchButton />
                        </el-icon>
                    </div>
                </div>
            </el-header>
            <el-container class="main-box">
                <el-aside width="200px">

                    <h4 class="mb-2">菜单</h4>
                    <el-menu default-active="2" class="el-menu-vertical-demo" :router="true">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <Operation />
                                </el-icon>
                                <span>体检商品管理</span>
                            </template>
                            <el-menu-item index="/Home/bodyTest">体检套餐管理</el-menu-item>
                            <el-menu-item index="/Home/bodyTesrOption">体检项管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <Operation />
                                </el-icon>
                                <span>体检信息管理</span>
                            </template>
                            <el-menu-item index="/Home/appointmentInfo">预约信息查询</el-menu-item>
                            <el-menu-item index="/Home/bodyTestHome">体检机构管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon>
                                    <Operation />
                                </el-icon>
                                <span>体检指标管理</span>
                            </template>
                            <el-menu-item index="/Home/SIManagement">标准指标管理</el-menu-item>
                            <el-menu-item index="/Home/jigozhibiao">机构指标管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="4">
                            <template #title>
                                <el-icon>
                                    <Operation />
                                </el-icon>
                                <span>团队管理</span>
                            </template>
                            <el-menu-item index="/Home/teamManagement">团队信息管理</el-menu-item>
                            <el-menu-item index="/Home">团队详情管理</el-menu-item>
                        </el-sub-menu>

                    </el-menu>

                </el-aside>
                <el-main>
                    <div v-loading="$piniaStore.isShowLoading">

                        <router-View></router-View>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import {
    Document,
    Menu as IconMenu,
    Operation,
    Setting,
} from '@element-plus/icons-vue'
import { useStore } from "@/piniaStore"
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const $router = useRouter()
const $piniaStore = useStore()
const userName = ref("")
if (sessionStorage.getItem("userID")) {
    userName.value = sessionStorage.getItem("userID") as string
} else if (sessionStorage.getItem("phn")) {
    userName.value = sessionStorage.getItem("phn") as string
}
const exitFn = () => {
    sessionStorage.clear()
    $router.push("/Login")
    window.location.reload()
    ElMessage({
        type: 'success',
        message: "退出成功"
    })
}
</script>

<style scoped>
.common-layout {
    width: 100%;
    height: 100%;

}

.common-layout .context-box {
    height: 100%;
}

.el-header {
    width: 100%;
    line-height: 50px;
    color: #fff;
    background-color: #324057;
}

.el-header .header_content {
    display: flex;
    justify-content: space-between;
}

.common-layout .main-box {
    height: 100%;
    background-color: #f5f7fa;
}

.el-aside {
    background-color: #ffffff;
}

.el-aside .mb-2 {
    text-align: center;
}

.el-icon {
    margin-left: 5px;
    cursor: pointer;
}
</style>